<lv-group lvDirection="vertical" lvGutter="16px" style="width: 368px">
  <lv-input-group [lvPrefix]="'Https://'" [lvSuffix]="suffixTpl" [lvDisabled]="disabled">
    <input lv-input />
  </lv-input-group>

  <ng-template #suffixTpl>
    <i lv-icon="icon-help" lv-tooltip='this is help information'></i>
  </ng-template>

  <lv-input-group [lvSuffix]="unitSuffixTpl" [lvDisabled]="disabled">
    <input lv-input [(ngModel)]="bandwidthValue" />
  </lv-input-group>
  <ng-template #unitSuffixTpl>
    <span>Mb/s</span>
  </ng-template>

  <lv-form-control>
    <lv-input-group [lvSuffix]="labelSuffixTpl" [lvDisabled]="disabled">
      <input lv-input [formControl]="inputValue" />
    </lv-input-group>
  </lv-form-control>

  <ng-template #labelSuffixTpl>
    <!-- 文本域组合需要配合[ngClass]="{'lv-hasValue': inputValue.length > 0}"使用，span不换行避免有多余空格 -->
    <span [ngClass]="{ 'lv-hasValue': inputValue?.value?.length > 0 }">{{ inputValue?.value?.length }}</span>
    <span>/{{ limit }}</span>
  </ng-template>

  <lv-input-group [lvAddBefore]="areaCodeTpl" class="aui-select-left" [lvDisabled]="disabled">
    <input lv-input placeholder="###-####-####" />
  </lv-input-group>
  <ng-template #areaCodeTpl>
    <lv-select
      [(ngModel)]="areaCode"
      [lvOptions]="areaCodeOptions"
      [lvDisabled]="disabled"
      lvValueKey="value"
      class="aui-inner-select"
    ></lv-select>
  </ng-template>

  <lv-input-group [lvAddAfter]="unitTpl" class="aui-select-right" [lvDisabled]="disabled">
    <input lv-input />
  </lv-input-group>
  <ng-template #unitTpl>
    <lv-select [(ngModel)]="unit" [lvOptions]="unitOptions" [lvDisabled]="disabled" lvValueKey="value" class="aui-inner-select"></lv-select>
  </ng-template>

  <lv-input-group [lvAddBefore]="storageAddBeforeTpl" [lvPrefix]="storagePrefixTpl" class="aui-select-left aui-select-storage" [lvDisabled]="disabled">
    <input lv-input />
  </lv-input-group>

  <ng-template #storageAddBeforeTpl>
    <lv-select
        [(ngModel)]="storageName"
        [lvOptions]="storageNameOptions"
        [lvDisabled]="disabled"
        lvValueKey="value"
        class="aui-inner-select aui-storage-select"
      ></lv-select>
  </ng-template>
  <ng-template #storagePrefixTpl>
    <i lv-icon="lv-icon-search" class="aui-icon"></i>
  </ng-template>

  <lv-input-group [lvSuffix]="loadingTpl" [lvDisabled]="disabled">
    <input lv-input />
  </lv-input-group>

  <ng-template #loadingTpl>
    <ng-container *ngIf="loading">
      <img src="assets/webp/gray.png" alt="icon-loading" class="lv-icon-loading" style="width: 16px; height: 16px" />
    </ng-container>
  </ng-template>

  <button type="button" lv-button (click)="change()">{{ btnText }}</button>
</lv-group>
